<template>
	<view class="fs14">
		<view class="uni-flex justify-right w-full m-t10" v-if="!isShowp && isButton">
			<view class="bg-blue text-white w-60n height-32 p-20 text-center m-r20 round-20" @click="isShowp=true">筛选</view>
		</view>
		<view class="project-search bg-white p-t10" v-if="isShowp">
			<template v-for="(item, key) in fieldList">
				<view class="uni-flex justify-space-between m-b20">
					<view class="w-60n search-row-label">{{item.label}}</view>
					<uni-data-select class="search-row-date" v-model="form[item.field]" :localdata="item.options" v-if="item.type == 'select'"></uni-data-select>
					<uni-datetime-picker type="date" v-model="form[item.field]" v-else-if="item.type == 'date'" />
					<uni-easyinput type="text" v-model="form[item.field]" :placeholder="item.placeholder" v-else></uni-easyinput>
				</view>
			</template>			
			<view class="uni-flex justify-space-around m-b20">
				<view class="w-40 bg-graydf text-gray9 justify-center align-center round-40 text-center" @click="cancelHandle">取消</view>
				<view class="w-40 bg-blue text-white justify-center align-center round-40 text-center" @click="clickHandle">确定</view>
			</view>
		</view>
	</view>
</template>

<script>
import { getModelProject } from "@/api/project.js";
export default {
	name: 'form-search',
	props: {
		isShow: {
			type: Boolean,
			default: false
		},
		isButton: {
			type: Boolean,
			default: true
		},
		fields: {
			type: Array,
			default: []
		}
	},
	data(){
		return {
			isShowp: false,
			fieldList: [],
			form: {}
		}
	},
	watch:{		
		isShow: function(newval, oldval){
			if(newval != oldval) this.isShowp = newval;
		},
		fields: function(newval, oldval){
			if(newval != oldval) {
				this.fieldList = newval;
				this.setFormField();
			}
		}
	},
	mounted() {
		this.fieldList = this.fields;
		this.isShowp = this.isShow;
		this.setFormField();
	},
	methods:{
		/**
		 * form
		 */
		setFormField(){
			this.fieldList.forEach((item) => {
				this.form[item.field] = item.value ? item.value : "";
			})
		},
		cancelHandle(){
			this.isShowp = false;
			this.$emit('cancel');
		},
		clickHandle(){
			this.isShowp = false;
			this.$emit('confirm', this.form);
		}
	}
}
</script>

<style  lang="scss">
.project-search {
	width: 92vw;
	padding: 2vw 4vw;
	line-height: 70rpx;
}
.uni-row {
	margin-bottom: 20rpx !important;
}
.search-row-date {
	width: 100%;
	flex: 1;
}
</style>